<template>
	<navigatorComp title="牌位信息" bgcColor="#121512" fontColor="#fff"></navigatorComp>
	<mescroll-uni
		:down="downOption"
		:up="upOption"
		@init="mescrollInit"
		@down="downCallback"
		@up="upCallback"
		:height="height + 'px'"
	>
		<view class="tablet_list">
			<view class="tablet_item" v-for="(item, index) in list" key="index">
				<view>
					<view class="display_flex" style="justify-content: flex-start">
						<view class="display_flex" style="margin-right: 144rpx">
							<view class="tablet_item_label">世系:</view>
							<view class="tablet_item_value">{{ item.shixi }}</view>
						</view>
						<view class="display_flex">
							<view class="tablet_item_label">姓名:</view>
							<view class="tablet_item_value">{{ item.tabletName }}</view>
						</view>
					</view>
					<view
						class="display_flex"
						v-if="item.jiri"
						style="margin-top: 16rpx; justify-content: flex-start"
					>
						<view class="tablet_item_label">忌日:</view>
						<view class="tablet_item_value">{{ item.jiri }}</view>
					</view>
					<view style="margin-top: 16rpx" v-if="item.remark">
						<view class="tablet_item_label">备注:</view>
						<view class="tablet_item_value" style="margin: 16rpx 0 0">
							{{ item.remark }}
						</view>
					</view>
				</view>
				<view class="tablet_img">
					<image src="http://112.124.50.179:8888/imgs/home/tablet.png" mode=""></image>
					<view class="tablet_name">{{ item.tabletIndex }}</view>
				</view>
			</view>
		</view>
	</mescroll-uni>
</template>

<script setup>
import navigatorComp from '/components/navigator/index.vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { onReady, onPageScroll, onReachBottom, onShow, onLoad } from '@dcloudio/uni-app';
import { getCurrentInstance, ref, reactive, onMounted } from 'vue';
import { formatTimestamp } from '@/utils/time';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();
onShow(() => {
	setTimeout(() => {
		latestId.value = 0;
		getMescroll().resetUpScroll();
	}, 1);
});
const { getMescroll, mescrollInit } = useMescroll(); // 调用mescroll的hook
//翻页信息
const downOption = ref({
	auto: false
});
const upOption = ref({
	auto: false
});
const downCallback = (mescroll) => {
	latestId.value = 0;
	getMescroll().resetUpScroll();
};
let height = ref(0);
let latestId = ref(0);
let list = ref([]);
onMounted(() => {
	// #ifdef H5
	height.value =
		uni.getSystemInfoSync().windowHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight -
		uni.upx2px(88);
	// #endif

	// #ifdef MP-WEIXIN
	height.value =
		uni.getSystemInfoSync().windowHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight;
	// #endif
});
const upCallback = (mescroll) => {
	homeApi
		.getTabletListApi({
			hallId: uni.getStorageSync('hallId'),
			latestId: latestId.value
		})
		.then((res) => {
			const curPageData = res.data.tabletList || []; // 当前页数据
			if (latestId.value == 0) list.value = [];
			list.value = list.value.concat(curPageData);
			if (curPageData.length) {
				latestId.value = curPageData[curPageData.length - 1].userId || 0;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	box-sizing: border-box;
}

.tablet_list {
	padding: 32rpx;

	.tablet_item {
		width: 100%;
		min-height: 168rpx;
		background: #292b2a;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		position: relative;
		padding: 32rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.tablet_img {
		width: 64rpx;
		height: 144rpx;
		position: absolute;
		right: 24rpx;
		top: 10rpx;
		z-index: 999;

		&:last-child {
			margin-right: 0;
		}

		image {
			width: 100%;
			height: 100%;
		}

		.tablet_name {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			font-weight: 500;
			font-size: 20rpx;
			letter-spacing: 5rpx;
			color: #ffb76f;
			text-align: center;
			line-height: 100rpx;
		}

		.tablet_name_chinese {
			writing-mode: vertical-lr;
		}
	}

	.tablet_item_label {
		font-weight: 500;
		font-size: 28rpx;
		color: #f3e0bb;
		position: relative;

		&::after {
			content: '';
			display: block;
			width: 64rpx;
			height: 8rpx;
			background: linear-gradient(90deg, #d4c6b3 0%, rgba(212, 198, 179, 0) 100%);
			border-radius: 4rpx;
			margin-top: -10rpx;
		}
	}

	.tablet_item_value {
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		margin-left: 16rpx;
		position: relative;
	}
}
</style>
